<template>
  <el-dialog
    v-if="dialogVisible"
    width="40%"
    title="应用授权"
    :lock-scroll="false"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <div class="app_allow_info">
      <div>
        <span class="app_allow_info_title">APP_ID:</span>
        <div class="app_allow_info_content">
          <span v-text="row.id" />
          <div class="app_allow_info_content_operate">
            <el-button v-clipboard:copy="row.id" v-clipboard:success="handleCopySuccess" class="fa fa-copy" type="text" />
          </div>
        </div>
      </div>
      <div>
        <span class="app_allow_info_title">APP_SECRET_KEY:</span>
        <div class="app_allow_info_content">
          <span v-text="appAllowInfo.isShowSecretKey ? row.secretKey : '**********************'" />
          <div class="app_allow_info_content_operate">
            <el-button type="text" :class="`fa ${appAllowInfo.isShowSecretKey ? 'fa-eye-slash' : 'fa-eye'}`" @click="handleIsShowSecretKey" />
            <el-button v-clipboard:copy="row.secretKey" v-clipboard:success="handleCopySuccess" type="text" class="fa fa-copy" />
          </div>
        </div>
      </div>
    </div>
    <div class="tip">
      <span>温馨提示:</span>
      <span>1.请添加应用需要授权的URL, <span class="red">不添加则默认拒绝访问</span></span>
      <span>2.访问的URL需以http://或https://开头</span>
      <span>3.可在URL结尾使用通配符<span class="red">*</span></span>
      <span>3.如果两条URL相同,则<span class="red">只保留状态为禁用的URL</span></span>
    </div>
    <TablePageContainer :is-show-card="false">
      <template #table>
        <el-form ref="form" :model="form" :rules="rules">
          <el-table v-loading="form.loading" class="w_100" :data="form.tableData" border stripe>
            <el-table-column prop="url" label="URL" align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData.${scope.$index}.url`" :rules="rules.url">
                  <el-input v-model="scope.row.url" placeholder="请输入URL" :disabled="form.isDisabledEdit" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :disabled="form.isDisabledEdit" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
              <template slot-scope="scope">
                <el-button v-if="scope.$index === form.tableData.length - 1" type="text" icon="fa fa-pen-to-square" :disabled="form.isDisabledEdit" @click="handleTableAdd">新增</el-button>
                <el-button v-if="form.tableData.length !== 1" type="text" icon="fa fa-trash-can" :disabled="form.isDisabledEdit" @click="handleTableDel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </TablePageContainer>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button :type="!form.isDisabledEdit ? '' : 'primary'" @click="handleChangeEdit" v-text="!form.isDisabledEdit ? '取消编辑' : '编辑'" />
      <el-button v-if="!form.isDisabledEdit" type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { change, getList } from '@/api/client/clientAllow'
import _ from 'lodash'

export default {
  name: 'ClientAllow',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer')
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      appAllowInfo: {
        isShowSecretKey: false,
        label_style: {
          'font-weight': '600',
          'height': '40px',
          'line-height': '40px',
          'width': '100px',
          'word-break': 'keep-all',
          'display': 'block'
        }
      },
      form: {
        isDisabledEdit: true,
        loading: false,
        tableData: [],
        finalTableData: []
      },
      rules: {
        url: [{ required: true, message: '请输入URL', trigger: ['change', 'blur'] }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.form.loading = true
      getList({ clientId: this.row.id }).then(res => {
        this.form.tableData = res.data
        this.form.finalTableData = _.cloneDeep(this.form.tableData)
        if (this.form.tableData.length === 0) {
          this.handleTableAdd()
        }

        this.form.loading = false
      })
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          change(this.row.id, this.form.tableData).then(res => {
            this.getList()
            this.form.isDisabledEdit = true
            this.$message.success('修改成功')
          })
        }
      })
    },
    handleTableAdd() {
      this.$nextTick(() => {
        this.form.tableData.push({
          url: '',
          status: 1
        })
      })
    },
    handleTableDel(index) {
      this.form.tableData.splice(index, 1)
    },
    handleIsShowSecretKey() {
      this.appAllowInfo.isShowSecretKey = !this.appAllowInfo.isShowSecretKey
    },
    handleCopySuccess() {
      this.$message.success('复制成功')
    },
    handleChangeEdit() {
      const isDisabledEdit = this.form.isDisabledEdit
      if (isDisabledEdit || JSON.stringify(this.form.tableData) === JSON.stringify(this.form.finalTableData)) {
        this.form.isDisabledEdit = !isDisabledEdit
      } else {
        this.$confirm('取消编辑后您所修改的内容将丢失, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form.isDisabledEdit = !isDisabledEdit
          this.form.tableData = _.cloneDeep(this.form.finalTableData)
        })
      }
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang="scss">
.app_allow_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px dotted #ccc;

  & > div {
    height: 30px;
    display: flex;
    align-items: center;
  }

  .app_allow_info_title {
    font-weight: bold;
  }

  .app_allow_info_content {
    display: flex;
    align-items: center;
    margin-left: 11px;

    .app_allow_info_content_operate {
      margin-left: 10px;
    }
  }
}

.tip {
  width: 100%;
  padding: 20px 10px;
  margin-top: 10px;
  border-radius: 4px;
  border: 1px dashed #eaeaea;
  background: #f8f8f8;

  span {
    display: block;

    .red {
      display: inline;
      color: #d70000;
      font-weight: bold;
    }

    &:first-child {
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}

.el-form-item {
  margin-bottom: 0;
}
</style>
